<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>配置页面 - MQTT控制面板</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 顶部导航栏 -->
        <header class="header">
            <h1 class="logo">MQTT控制面板</h1>
            <nav class="nav">
                <a href="index.html" class="nav-link">首页</a>
                <a href="config.html" class="nav-link active">配置</a>
                <a href="user.html" class="nav-link">控制</a>
            </nav>
        </header>

        <!-- 主内容区域 -->
        <main class="main-content">
            <h2>配置设置</h2>
            
            <!-- MQTT Broker配置表单 -->
            <section class="config-section">
                <h3>MQTT Broker配置</h3>
                <form id="mqtt-config-form" class="config-form">
                    <div class="form-group">
                        <label for="broker-url">Broker地址:</label>
                        <input type="text" id="broker-url" name="brokerUrl" 
                               placeholder="ws://broker.emqx.io:8083/mqtt" 
                               value="ws://broker.emqx.io:8083/mqtt">
                        <small style="color: #666; font-size: 0.9em;">浏览器环境推荐使用WebSocket协议 (ws:// 或 wss://)</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="username">用户名 (可选):</label>
                        <input type="text" id="username" name="username" 
                               placeholder="用户名">
                    </div>
                    
                    <div class="form-group">
                        <label for="password">密码 (可选):</label>
                        <input type="password" id="password" name="password" 
                               placeholder="密码">
                    </div>
                    
                    <!-- 高级连接选项 -->
                    <div class="advanced-options" style="margin-top: 1rem; padding: 1rem; background: #f8f9fa; border-radius: 5px;">
                        <h4 style="margin-bottom: 0.5rem; color: #666;">高级选项</h4>
                        <div class="form-group">
                            <label for="client-id">Client ID:</label>
                            <input type="text" id="client-id" name="clientId" 
                                   placeholder="自动生成" 
                                   title="客户端标识符，建议保持自动生成">
                        </div>
                        <div class="form-group">
                            <label for="keepalive">心跳间隔 (秒):</label>
                            <input type="number" id="keepalive" name="keepalive" 
                                   value="60" min="10" max="300"
                                   title="连接保持活跃的心跳间隔">
                        </div>
                        <div class="form-group">
                            <label for="timeout">连接超时 (毫秒):</label>
                            <input type="number" id="timeout" name="connectTimeout" 
                                   value="4000" min="1000" max="10000"
                                   title="连接建立的最大等待时间">
                        </div>
                    </div>
                    
                    <div class="form-actions">
                        <button type="button" id="test-connection" class="btn btn-secondary">测试连接</button>
                        <button type="submit" class="btn btn-primary">保存配置</button>
                    </div>
                </form>
                
                <div id="connection-status" class="status-message" style="display: none;"></div>
            </section>

            <!-- 指令配置区域 -->
            <section class="config-section">
                <h3>控制指令配置</h3>
                <p>配置3组控制指令的topic和payload，每个指令对应控制页面的一个按钮。</p>
                
                <div id="command-configs">
                    <!-- 指令1 -->
                    <div class="command-config">
                        <h4>指令 1</h4>
                        <div class="form-group">
                            <label>按钮显示文字:</label>
                            <input type="text" name="buttonText1" placeholder="按钮1" value="指令1">
                        </div>
                        <div class="form-group">
                            <label>Topic:</label>
                            <input type="text" name="topic1" placeholder="/869298058908310_act" value="/869298058908310_act">
                        </div>
                        <div class="form-group">
                            <label>Payload:</label>
                            <textarea name="payload1" placeholder='{"k":"AA_8D","v":"AA 00 00 00 00 00 00 8D"}'>{"k":"AA_8D","v":"AA 00 00 00 00 00 00 8D"}</textarea>
                        </div>
                    </div>
                    
                    <!-- 指令2 -->
                    <div class="command-config">
                        <h4>指令 2</h4>
                        <div class="form-group">
                            <label>按钮显示文字:</label>
                            <input type="text" name="buttonText2" placeholder="按钮2" value="指令2">
                        </div>
                        <div class="form-group">
                            <label>Topic:</label>
                            <input type="text" name="topic2" placeholder="/869298058908310_act">
                        </div>
                        <div class="form-group">
                            <label>Payload:</label>
                            <textarea name="payload2" placeholder='{"k":"AA_8D","v":"AA 00 00 00 00 00 00 8D"}'></textarea>
                        </div>
                    </div>
                    
                    <!-- 指令3 -->
                    <div class="command-config">
                        <h4>指令 3</h4>
                        <div class="form-group">
                            <label>按钮显示文字:</label>
                            <input type="text" name="buttonText3" placeholder="按钮3" value="指令3">
                        </div>
                        <div class="form-group">
                            <label>Topic:</label>
                            <input type="text" name="topic3" placeholder="/869298058908310_act">
                        </div>
                        <div class="form-group">
                            <label>Payload:</label>
                            <textarea name="payload3" placeholder='{"k":"AA_8D","v":"AA 00 00 00 00 00 00 8D"}'></textarea>
                        </div>
                    </div>
                </div>
                
                <div class="form-actions">
                    <button type="button" id="save-commands" class="btn btn-primary">保存指令配置</button>
                </div>
            </section>
            
            <div id="save-status" class="status-message" style="display: none;"></div>
        </main>
    </div>

    <script src="config.js"></script>
</body>
</html>